<template>
    <div class="content">
        <a-card class="card">
            <div class="button">
                <a-space>
                    <a-button type="primary" @click="showAddModal">新增</a-button>
                    <a-popconfirm title="确定要删除该类别吗?"
                                  ok-text="Yes"
                                  cancel-text="No"
                                  @confirm="confirm"
                                  @cancel="cancel">
                        <a-button type="primary" danger>删除</a-button>
                    </a-popconfirm>

                    <!--                    <a-button type="dashed">删除</a-button>-->
                </a-space>
            </div>
            <div class="tableBox">
                <a-table :loading="loading"
                         childrenColumnName="childrenMenus"
                         :dataSource="tableData"
                         :row-selection="rowSelection"
                         :rowKey="(record , index) => {return record.id}"
                         :pagination="pagination"
                         :columns="columns">
                    <template #type="{ text}">
                        <a-tag style="font-size: 17px" v-if="text=='1'" color="green">商品类</a-tag>
                        <a-tag style="font-size: 17px" v-else color="orange">店铺类</a-tag>
                    </template>
                    <template #typeName="{ text}">
                        <span style="color: red">{{text}}</span>
                    </template>
                    <template #remark="{ text}">
                        <span style="color: #4EB1F7" v-if="text">{{text}}</span>
                        <span style="color: #87d068" v-else>暂无</span>
                    </template>
                    <template #action="{record}">
                        <a-button type="link" @click="editHandle(record)">编辑</a-button>

                    </template>
                </a-table>
            </div>
        </a-card>
    </div>
    <!--  新增弹框      -->
    <common-modal :data="modalData.formState" :visible="modalData.showAdd" :title="modalData.title" :typeName="modalData.typeName" @close="handleClose"></common-modal>
</template>

<script>
import {defineComponent, onMounted, reactive, toRefs} from "vue";
import {apiAddTypeList, apiGetTypeList, apiEditTypeList, apiDeleteTypeList} from "../../api";
import commonModal from './components/commonModal.vue'
import {message} from "ant-design-vue";

export default defineComponent({
    name: "index",
    components: { commonModal},
    setup() {
        const state = reactive({
            type: 0,  // 0: 店铺分类  1： 商品分类
        })

        // 对话框表单
        const modalData = reactive({
            formState: {},
            showAdd: false,
            title: "",
            typeName: ""
        })

        const tableDataObj = reactive({
            loading: false,
            tableData: [
            ],
            pagination: {
                current: 1,
                pageSize: 10,
                total: 1,
                showSizeChanger: true,
                showTotal: (total) => {
                    return `共 ${total} 条`
                }
            },
            columns: [
                {
                    title: "序号",
                    // width: 50,
                    align: 'center',
                    customRender: (text) => `${text.index + 1}`
                },
                {
                    title: "所属类别",
                    dataIndex: "type",
                    key: "type",
                    align: 'center',
                    slots: { customRender: 'type'},
                    ellipsis: true
                },
                {
                    title: "名称",
                    dataIndex: "typeName",
                    align: 'center',
                    // width: 160,
                    key: "typeName",
                    ellipsis: true,
                    slots: { customRender: 'typeName'}
                },
                {
                    title: "备注",
                    dataIndex: "remark",
                    key: "remark",
                    align: 'center',
                    // width: 150,
                    ellipsis: true,
                    slots: { customRender: 'remark'}
                },

                {
                    title: "添加时间",
                    dataIndex: "createTime",
                    align: 'center',
                    key: "createTime",
                    // width: 200,
                    ellipsis: true
                },
                {
                    title: "操作",
                    key: "action",
                    align: 'center',
                    // width: 150,
                    slots: {
                        customRender: "action"
                    }
                }
            ]
        })


        // 获取列表
        const getList = () => {
            const params = {
                limit: tableDataObj.pagination.pageSize,
                page: tableDataObj.pagination.current,
                name: '',
                // type: state.type
            }
            apiGetTypeList(params).then((res) => {
                console.log(res)
                if (res.data.code == 200) {
                    // console.log('类别',res)
                    tableDataObj.tableData = res.data.data.list
                    tableDataObj.pagination.total = res.data.data.totalCount
                }
            })
        }

        // table 行选择
        const rowSelection = reactive({
            selectedRowKeys: [],
            onChange: (selectedRowKeys, selectedRows) => {
                rowSelection.selectedRowKeys = selectedRowKeys
                console.log(rowSelection.selectedRowKeys)
            }
        })

        // 打开新增菜单弹框
        const showAddModal = () => {
            // state.addModalVisible = true
            modalData.showAdd = true
            modalData.title = "新增菜单"
            modalData.formState = {}
            modalData.typeName = "add"
        }

        // 编辑菜单
        const editHandle = (record) => {
            modalData.formState = record
            modalData.title = "编辑菜单"
            modalData.showAdd = true
            modalData.typeName = "edit"
        }

        // 关闭对话框
        // 控制对话框操作
        const handleClose = (val) => {
            if (val == 'add') {
                // 调用接口，新增菜单
                apiAddTypeList(modalData.formState).then((res) => {
                    console.log('xinz', res)
                    if (res.data.code == 200) {
                        message.success('新增成功')
                        getList()
                    }
                })
            }
            if (val == 'edit') {
                // 调用接口，编辑菜单
                apiEditTypeList(modalData.formState).then((res) => {
                    if (res.data.code == 200) {
                        message.success('修改成功')
                        getList()
                    }
                })
            }
            if (val == 'cancel') {
                // 点击取消按钮，
                getList()
            }
            modalData.showAdd = false
        }

        const cancel = () => {
            message.error('取消删除')
        }

        //
        const confirm = () => {
            if (rowSelection.selectedRowKeys.length === 0) {
                message.warning('请先选择数据')
                return
            }
            // 调用删除接口
            apiDeleteTypeList(rowSelection.selectedRowKeys) .then((res) => {
                if (res.data.code == 200) {
                    message.success('删除成功')
                    getList()
                }
            })
        }

        onMounted(() => {
            getList()
        })

        return {
            ...toRefs(tableDataObj),
            state,
            modalData,
            handleClose,
            showAddModal,
            editHandle,
            rowSelection,
            cancel,
            confirm
        }
    }
})
</script>

<style lang="less" scoped>
.content{
    width: 100%;
    height: 100%;

    .card {
        height: 100%;
        //background: #364d79;
        margin: 10px;

        .button {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 15px;
        }
    }
}
</style>